import { Layout, Button, Menu } from 'antd';
import {
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout
import styles from '../management.less'
import '../management.less';

const Rent: React.FC = (props) => {
    return <Layout className={styles.app}>
        <Sider className={styles.left}>
            <div className={styles.boxImg}>
                <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png" alt="" />
                <span>管理后台</span>
            </div>
            <div className={styles.boxButton}> <Button type="primary"><span>+</span> 新建</Button></div>
            <div>
                <Menu
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                >
                    <Menu.Item key="1" icon={<PieChartOutlined />}>
                        工作台
                    </Menu.Item>
                    <SubMenu key="sub1" icon={<MailOutlined />} title="文章管理">
                        <Menu.Item key="101">所有文章</Menu.Item>
                        <Menu.Item key="102">分类管理</Menu.Item>
                        <Menu.Item key="103">标签管理</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="2" icon={<DesktopOutlined />}>
                        页面管理
                    </Menu.Item>
                    <Menu.Item key="3" icon={<ContainerOutlined />}>
                        知识小册
                    </Menu.Item>
                    <Menu.Item key="4" icon={<ContainerOutlined />}>
                        海报管理
                    </Menu.Item>
                    <Menu.Item key="5" icon={<ContainerOutlined />}>
                        评论管理
                    </Menu.Item>
                    <Menu.Item key="6" icon={<ContainerOutlined />}>
                        邮件管理
                    </Menu.Item>
                    <Menu.Item key="7" icon={<ContainerOutlined />}>
                        文件管理
                    </Menu.Item>
                    <Menu.Item key="8" icon={<ContainerOutlined />}>
                        搜索记录
                    </Menu.Item>
                    <Menu.Item key="9" icon={<ContainerOutlined />}>
                        访问统计
                    </Menu.Item>
                    <Menu.Item key="10" icon={<ContainerOutlined />}>
                        用户管理
                    </Menu.Item>
                    <Menu.Item key="11" icon={<ContainerOutlined />}>
                        系统设置
                    </Menu.Item>
                </Menu>
            </div>
        </Sider>
        <Layout className={styles.right}>
            <Header className={styles.top}>Header</Header>
            <Content className={styles.bottom}>{props.children}</Content>
        </Layout>
    </Layout>

}

export default Rent